<template>
    <div class="layout">
      <!-- 侧边导航栏 -->
      <el-menu default-active="0" class="sidebar">
        <el-menu-item index="0" @click="goTo('/welcome')">
          <span>欢迎页面</span>
        </el-menu-item>
        <el-menu-item index="1" @click="goTo('/users')">
          <span>用户管理</span>
        </el-menu-item>
        <el-menu-item index="2" @click="goTo('/permissions')">
          <span>权限管理</span>
        </el-menu-item>
        <el-menu-item index="3" @click="goTo('/products')">
          <span>商品管理</span>
        </el-menu-item>
        <el-menu-item index="4" @click="goTo('/orders')">
          <span>订单管理</span>
        </el-menu-item>
        <el-menu-item index="5" @click="goTo('/statistics')">
          <span>数据统计</span>
        </el-menu-item>
      </el-menu>
  
      <!-- 主内容区域 -->
      <div class="main-content">
        <div class="header">
          <h1>电商后台管理系统</h1>
        </div>
        <div class="content">
          <h2>Welcome</h2>
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  import { useRouter } from 'vue-router';
  
  const router = useRouter();
  
  const goTo = (path) => {
    router.push(path);
  };
  </script>
  
  <style scoped>
  .layout {
    display: flex;
    height: 100vh;
  }
  .sidebar {
    width: 200px;
    height: 100%;
    background: #2c3e50;
    color: white;
  }
  .main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  .header {
    padding: 10px 20px;
    background: #1a252f;
    color: white;
    text-align: center;
  }
  .content {
    flex: 1;
    padding: 20px;
    background: #f0f2f5;
  }
  </style>